<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>常见的 Block、Inline 和 Inline-block 元素</title>
    <style>
        .container {
            margin-bottom: 20px;
        }
        .block {
            background-color: lightblue;
            margin: 5px 0;
            padding: 10px;
        }
        .inline {
            background-color: lightgreen;
            margin: 5px;
            padding: 5px;
        }
        .inline-block {
            background-color: lightcoral;
            margin: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <h1>常见的 Block、Inline 和 Inline-block 元素</h1>

    <div class="container">
        <h2>Block 元素</h2>
        <p class="block">这是一个段落（p 元素）。</p>
        <div class="block">这是一个 div 元素。</div>
        <header class="block">这是一个 header 元素。</header>
        <footer class="block">这是一个 footer 元素。</footer>
    </div>

    <div class="container">
        <h2>Inline 元素</h2>
        <span class="inline">这是一个 span 元素。</span>
        <a href="#" class="inline">这是一个 a 元素。</a>
        <strong class="inline">这是一个 strong 元素。</strong>
        <em class="inline">这是一个 em 元素。</em>
    </div>

    <div class="container">
        <h2>Inline-block 元素</h2>
        <button class="inline-block">这是一个 button 元素。</button>
        <input type="text" class="inline-block" value="这是一个 input 元素">
        <img src="eg_bulboff.gif" alt="图片" class="inline-block">
        <label class="inline-block">这是一个 label 元素。</label>
    </div>
</body>
</html>
